<template>
  <div class="profile-container">
    <div class="header">
      <h1>我的</h1>
    </div>
    <div class="profile-content">
      <div class="user-info">
        <div class="avatar">
          <img
            src="https://via.placeholder.com/80x80/a8edea/333?text=User"
            alt="avatar"
          />
        </div>
        <div class="user-details">
          <div class="username">用户名</div>
          <div class="user-id">ID: 123456</div>
        </div>
      </div>

      <div class="menu-list">
        <div
          v-for="item in menuItems"
          :key="item.id"
          class="menu-item"
          @click="handleMenuClick(item.id)"
        >
          <div class="menu-icon">
            {{ item.icon }}
          </div>
          <div class="menu-text">
            {{ item.text }}
          </div>
          <div class="menu-arrow">></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const menuItems = [
  { id: 1, text: '我的订单', icon: '📦' },
  { id: 2, text: '收货地址', icon: '📍' },
  { id: 3, text: '优惠券', icon: '🎫' },
  { id: 4, text: '设置', icon: '⚙️' },
  { id: 5, text: '客服中心', icon: '💬' },
  { id: 6, text: '关于我们', icon: 'ℹ️' },
]

const handleMenuClick = id => {
  console.log('点击菜单：', id)
}
</script>

<style scoped lang="less">
@import (reference) '../../styles/global.less';

.profile-container {
  min-height: 100vh;
  background: @background-color;

  .header {
    padding: 20px;
    text-align: center;
    background: @white;
    box-shadow: @box-shadow;

    h1 {
      margin: 0;
      color: @text-color;
      font-size: 24px;
    }
  }

  .profile-content {
    padding: 20px;

    .user-info {
      display: flex;
      align-items: center;
      background: @white;
      padding: 20px;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .avatar {
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-right: 15px;
        }
      }

      .user-details {
        .username {
          font-size: 18px;
          font-weight: bold;
          color: @text-color;
          margin-bottom: 5px;
        }

        .user-id {
          font-size: @font-size-sm;
          color: @text-color-tertiary;
        }
      }
    }

    .menu-list {
      background: @white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .menu-item {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        cursor: pointer;

        &:last-child {
          border-bottom: none;
        }

        &:active {
          background: @background-color;
        }

        .menu-icon {
          font-size: 20px;
          margin-right: 15px;
          width: 30px;
          text-align: center;
        }

        .menu-text {
          flex: 1;
          font-size: 16px;
          color: @text-color;
        }

        .menu-arrow {
          color: @text-color-tertiary;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
